<template>
  <div class="transfer-log-page">
    <!-- 页面标题与操作栏 -->
    <div class="page-header">
      <h2 class="page-title">调拨日志</h2>
      <el-button type="text" class="return-btn" @click="handleReturn">返回</el-button>
    </div>

    <!-- 搜索与新增栏 -->
    <div class="search-add-bar">
      <el-input 
        v-model="searchKey" 
        placeholder="请输入搜索内容" 
        class="search-input"
      />
      <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
      <el-button type="primary" class="add-btn" @click="openAddDialog">新增调拨</el-button>
    </div>

    <!-- 调拨日志表格 -->
    <el-table
      :data="transferLogData"
      border
      class="log-table"
      style="width: 100%"
      :cell-style="tableCellStyle"
      :header-cell-style="{ textAlign: 'center', background: '#f5f5f5' }"
    >
      <el-table-column prop="serial" label="序号" align="center" width="60" />
      <el-table-column prop="shopName" label="门店名称" align="center" width="100" />
      <el-table-column prop="shopId" label="门店ID" align="center" width="100" />
      <el-table-column prop="transferDate" label="调拨日期" align="center" width="100" />
      <el-table-column prop="transferAccount" label="调拨账户" align="center" width="100" />
      <el-table-column prop="targetAccount" label="被调拨账户" align="center" width="100" />
      <el-table-column prop="transferWay" label="调拨方式" align="center" width="100" />
      <el-table-column prop="transferAmount" label="调拨金额" align="center" width="100" />
      <el-table-column prop="accountBalance" label="账户余额" align="center" width="100" />
      <el-table-column prop="progressStatus" label="进度状态" align="center" width="100">
        <template #default="scope">
          <el-tag 
            :type="scope.row.progressStatus === '已审核' ? 'success' : 'danger'"
            :border-color="scope.row.progressStatus === '已审核' ? '#1890ff' : '#f5222d'"
          >
            {{ scope.row.progressStatus }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区 -->
    <div class="pagination-area">
      <div class="total-info">共4条 共4页</div>
      
      <div class="page-controls">
        <el-button 
          type="text" 
          icon="el-icon-arrow-left" 
          @click="prevPage" 
          :disabled="currentPage === 1"
          class="page-btn"
        />
        <el-button
          v-for="page in pageList"
          :key="page"
          :class="currentPage === page ? 'page-num active' : 'page-num'"
          @click="currentPage = page"
        >
          {{ page }}
        </el-button>
        <el-button 
          type="text" 
          icon="el-icon-arrow-right" 
          @click="nextPage" 
          :disabled="currentPage === totalPages"
          class="page-btn"
        />
      </div>

      <div class="page-size">
        <el-select 
          v-model="pageSize" 
          @change="handlePageSizeChange"
          class="size-select"
        >
          <el-option label="10条/页" value="10" />
        </el-select>
      </div>

      <div class="jump-area">
        <span>跳至</span>
        <el-input 
          v-model="jumpPage" 
          class="jump-input" 
          @keyup.enter="handleJump"
        />
        <span>页</span>
        <el-button 
          type="primary" 
          class="jump-confirm"
          @click="handleJump"
        >
          确定
        </el-button>
      </div>
    </div>

    <!-- 新增调拨弹窗 -->
    <el-dialog 
      v-model="addDialogVisible" 
      title="新增调拨" 
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="add-form">
        <div class="form-row">
          <el-form-item label="门店名称" label-width="80px">
            <el-input v-model="formData.shopName" class="form-input" />
          </el-form-item>
          <el-form-item label="品牌范围" label-width="80px">
            <el-input v-model="formData.brandScope" class="form-input" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="账户类型" label-width="80px">
            <el-input v-model="formData.accountType" class="form-input" />
          </el-form-item>
          <el-form-item label="账户余额" label-width="80px">
            <el-input v-model="formData.accountBalance" class="form-input" readonly />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="选择调拨账户" label-width="80px">
            <el-select v-model="formData.targetAccount" class="form-input">
              <el-option label="年单账户" value="年单账户" />
              <el-option label="现金账户" value="现金账户" />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="调拨方式" label-width="80px">
            <el-select v-model="formData.transferWay" class="form-input">
              <el-option label="增加" value="增加" />
              <el-option label="减少" value="减少" />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="输入调拨金额" label-width="80px">
            <el-input v-model.number="formData.transferAmount" type="number" class="form-input" />
          </el-form-item>
        </div>
      </div>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

// 搜索状态
const searchKey = ref('');

// 调拨日志数据
const transferLogData = ref([
  {
    serial: 1,
    shopName: "华泰美容",
    shopId: "F13240500",
    transferDate: "2022.3.15",
    transferAccount: "现金账户",
    targetAccount: "年单账户",
    transferWay: "增加",
    transferAmount: 9000,
    accountBalance: 60000,
    progressStatus: "已审核"
  },
  {
    serial: 2,
    shopName: "华泰美容",
    shopId: "F1450500",
    transferDate: "2022.4.15",
    transferAccount: "现金账户",
    targetAccount: "年单账户",
    transferWay: "减少",
    transferAmount: 9000,
    accountBalance: 60000,
    progressStatus: "申请中"
  },
  {
    serial: 5,
    shopName: "华泰美容",
    shopId: "X140500",
    transferDate: "2022.4.20",
    transferAccount: "现金账户",
    targetAccount: "年单账户",
    transferWay: "增加",
    transferAmount: 8000,
    accountBalance: 68000,
    progressStatus: "已审核"
  },
  {
    serial: 6,
    shopName: "华泰美容",
    shopId: "X140500",
    transferDate: "2022.5.10",
    transferAccount: "现金账户",
    targetAccount: "年单账户",
    transferWay: "减少",
    transferAmount: 7000,
    accountBalance: 61000,
    progressStatus: "申请中"
  }
]);

// 表格单元格样式（控制调拨方式颜色）
const tableCellStyle = ({ row, column }) => {
  if (column.prop === 'transferWay') {
    return {
      color: row.transferWay === '增加' ? '#1890ff' : '#f5222d',
      textAlign: 'center'
    };
  }
  return { textAlign: 'center' };
};

// 分页状态
const currentPage = ref(1);
const pageSize = ref('10');
const totalPages = ref(4);
const jumpPage = ref('');
const pageList = ref([1, 2, 3, 4]);

// 新增调拨弹窗状态
const addDialogVisible = ref(false);
// 表单数据
const formData = reactive({
  shopName: '',
  brandScope: '阿玛尼',
  accountType: '现金账户',
  accountBalance: '1787183',
  targetAccount: '年单账户',
  transferWay: '增加',
  transferAmount: ''
});

// 搜索方法
const handleSearch = () => {
  ElMessage.success('搜索成功');
};

// 分页方法
const prevPage = () => currentPage.value > 1 && currentPage.value--;
const nextPage = () => currentPage.value < totalPages.value && currentPage.value++;
const handlePageSizeChange = (size) => {
  pageSize.value = size;
  ElMessage.info(`已切换为${size}条/页`);
};
const handleJump = () => {
  const page = Number(jumpPage.value);
  if (page && page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
  } else {
    ElMessage.warning('请输入1-4的页码');
  }
  jumpPage.value = '';
};

// 弹窗操作
const openAddDialog = () => {
  // 重置表单（保留默认值）
  formData.transferAmount = '';
  addDialogVisible.value = true;
};
const handleSubmit = () => {
  if (!formData.transferAmount || formData.transferAmount <= 0) {
    ElMessage.warning('请输入有效的调拨金额');
    return;
  }
  // 模拟提交逻辑
  ElMessage.success('调拨申请提交成功');
  addDialogVisible.value = false;
};

// 返回按钮
const handleReturn = () => {
  ElMessage.info('已返回上一页');
};
</script>

<style scoped>
.transfer-log-page {
  padding: 20px;
  font-family: "Microsoft Yahei", sans-serif;
  background: #fff;
}

/* 页面标题 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.page-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.return-btn {
  padding: 0;
  color: #666;
}

/* 搜索与新增栏 */
.search-add-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.search-input {
  width: 200px;
}
.search-btn {
  background: #1890ff;
  border-color: #1890ff;
}
.add-btn {
  background: #52c41a;
  border-color: #52c41a;
  margin-left: auto;
}

/* 表格样式 */
.log-table {
  --el-table-border-color: #dcdcdc;
  margin-bottom: 20px;
}

/* 分页区 */
.pagination-area {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}
.page-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-btn {
  padding: 0;
}
.page-num {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #dcdcdc;
  background: #fff;
}
.page-num.active {
  background: #1890ff;
  color: #fff;
  border-color: #1890ff;
}
.size-select {
  width: auto;
}
.jump-area {
  display: flex;
  align-items: center;
  gap: 4px;
}
.jump-input {
  width: 40px;
}
.jump-confirm {
  padding: 4px 8px;
}

/* 新增调拨弹窗表单 */
.add-form {
  padding: 10px 0;
}
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}
.form-input {
  width: 200px;
}
</style>